/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 14:52:51
 * @LastEditors: chenbinfa
 * @LastEditTime: 2023-01-17 11:38:35
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useRef, useState, useEffect } from "react";
import { message } from "antd";
import _ from "lodash";
import styled from "styled-components";
import api from "@services/";
import { ThTable } from "@/components/ThTable";
import MList from "@/components/mobile/MList";
import columns from "./columns";

const Main = ({ className, accountInfo }) => {
    if (!accountInfo) {
        return '';
    }
    const [tabs, setTabs] = useState([]);
    const setTabCurr = (label, num) => {
        setTabs(tmpTabs => {
            let arr = [];
            tmpTabs.forEach(t => {
                if (typeof num != 'undefined') {
                    if (t.label == label) {
                        t.n = num;
                    }
                } else {
                    if (t.label == label) {
                        t.isCurr = true;
                    } else {
                        t.isCurr = false;
                    }
                }
                arr.push(t);
            });
            return arr;
        });
    }
    const makeProps = (label, method, column, params) => {
        const props = {
            border: true,
            size: "middle",
            pagesize: 10,
            loadList: {
                params,
                method,
                cb: {
                    total: (num) => setTabCurr(label, num)
                }
            },
            table: {
                columns: column
            }
        };
        return props;
    }

    useEffect(() => {
        let label, method, column, params, arr = [];
        label = 'Extrinsics';
        method = api.extrinsics.list;
        column = columns.extrinsics;
        params = { accountId: accountInfo.accountId };
        arr.push({ label, n: 111, isCurr: true, props: makeProps(label, method, column, params) });

        label = 'Transfer';
        method = api.transfer.list;
        column = columns.transfer;
        params = { accountId: accountInfo.accountId };
        arr.push({ label, n: 111, isCurr: false, props: makeProps(label, method, column, params) });

        label = 'Challenges';
        method = api.challenge.list;
        column = columns.challenge;
        params = { accountId: accountInfo.accountId };
        arr.push({ label, n: 111, isCurr: false, props: makeProps(label, method, column, params) });

        label = 'Consensus';
        method = api.consensu.list;
        column = columns.consensu;
        params = { accountId: accountInfo.accountId };
        arr.push({ label, n: 111, isCurr: false, props: makeProps(label, method, column, params) });
        setTabs(arr);
        if(window.location.href.includes('?')){
            let t=window.location.search.replace('?','');
            setTimeout(function(){
                setTabCurr(t);
            },1000);
        }
    }, [accountInfo]);


    return (
        <div className={className}>
            <div>
                <div className="o-title">
                    {
                        tabs.map(tab => {
                            return <span key={tab.label} className={tab.isCurr ? 'curr' : 'uncurr'} onClick={() => setTabCurr(tab.label)}>{tab.label} ({tab.n.toLocaleString("zh", { style: "decimal" })})</span>
                        })
                    }
                </div>
                {
                    tabs.map(t => {
                        return (
                            <div key={t.label} className={t.isCurr ? 'yes' : 'none'}>
                                <div className="pc-list">
                                    <ThTable props={t.props} />
                                </div>
                                <div className="mobile-list">
                                    <MList props={t.props} />
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    );
};

export default React.memo(styled(Main)`
    display: block;
    .challenge-progress{
        width: 100%;
        display: block;
        .pro:first-child{
            margin-bottom:20px;
        }
        .pro:last-child{
            margin-top:20px;
        }
        .pro{
            display: flex;
            flex-direction: row;            
            justify-content: space-around;
            align-items: center;
            margin-right:30px;
            span{
                font-size: 14px;
                color: #000000;
                font-weight: bold;
            }
            i{
                width:22px;
                height:20px;
                display: block;
                background-image: url(/img/right.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 22px;
                margin:0 10%;
                transform: rotate(180deg);
            }
            div{
                display: flex;
                flex-direction: column;
                align-items: center;
                font{
                    width:8px;
                    height:8px;                    
                    border:1px solid #000000;
                    border-radius: 100%;
                    display: block;
                    overflow: hidden;
                }
                .pass{
                    background-color: #a0ffcc;
                }
                .fail{
                    background-color: #ffb3b3;
                }
                .pending{
                    background-color: #fee264;
                }
                label{
                    text-align: center;
                    font-size: 14px;
                    line-height: 16px;
                }
            }
        }
    }
`);
